import { useState, useMemo } from 'react'
import IconButton from '@material-ui/core/IconButton';
import moment from 'moment';
import './article.css'
function Article(props) {
    const { title, author, create_time, _id, content, like,history } = props;
    const [isLike, setIsLike] = useState(like);
    const goDetail = () => {
        history.push(`/article/${_id}`);
    }
    const track = (e) => {
        setIsLike(!isLike)
    }
    const star = useMemo(() => {
        if (isLike) {
            return <IconButton color="primary" variant="contained" onClick={track}>
                <svg t="1627803678095" className="icon" viewBox="0 0 1054 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9807" width="20" height="20"><path d="M570.477039 28.040397L694.725004 290.073071a48.345512 48.345512 0 0 0 36.259134 27.073486l281.370879 43.027506a48.345512 48.345512 0 0 1 27.073486 81.703915l-206.435335 211.269886a48.345512 48.345512 0 0 0-13.053288 42.060595L870.219212 966.910236a48.345512 48.345512 0 0 1-67.683717 52.696607l-253.813936-115.545773a48.345512 48.345512 0 0 0-40.126775 0l-255.747757 115.062318A48.345512 48.345512 0 0 1 185.16331 966.910236l48.345512-268.801046a48.345512 48.345512 0 0 0-13.053288-42.060595L14.020198 443.811798A48.345512 48.345512 0 0 1 41.093685 362.591338l281.370879-43.027505A48.345512 48.345512 0 0 0 358.723697 290.073071L483.455118 28.040397a48.345512 48.345512 0 0 1 87.021921 0z" fill="#FFCE00" p-id="9808"></path><path d="M1039.911958 443.811798a48.345512 48.345512 0 0 0-27.073486-81.703915l-281.370879-43.027505a48.345512 48.345512 0 0 1-36.742589-29.007307L570.477039 28.040397a48.345512 48.345512 0 0 0-43.510961-28.040397v898.743064a48.345512 48.345512 0 0 1 19.82166 4.351096l253.813937 115.545773A48.345512 48.345512 0 0 0 870.219212 966.910236l-48.345512-268.801046a48.345512 48.345512 0 0 1 13.053288-42.060595z" fill="#FFEC00" p-id="9809"></path></svg>
            </IconButton>
        } else {
            return <IconButton color="primary" variant="contained" onClick={track}>
                <svg t="1627802502446" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9675" width="20" height="20"><path d="M512 136.106667c5.290667 0 10.666667 2.773333 13.397333 8.533333l104.533334 222.677333c2.048 4.48 6.272 7.594667 11.093333 8.277334l234.88 35.925333a14.72 14.72 0 0 1 8.277333 24.874667l-170.794666 175.104a14.634667 14.634667 0 0 0-3.968 12.714666l40.192 246.613334a14.805333 14.805333 0 0 1-21.717334 15.274666l-208.810666-115.413333a14.976 14.976 0 0 0-14.165334 0L296.106667 886.101333a14.549333 14.549333 0 0 1-7.125334 1.877334 14.848 14.848 0 0 1-14.592-17.194667l40.192-246.613333a14.634667 14.634667 0 0 0-3.968-12.672l-170.922666-175.104a14.762667 14.762667 0 0 1 8.32-24.874667l235.008-35.925333a14.677333 14.677333 0 0 0 11.093333-8.277334l104.490667-222.72c2.688-5.717333 8.106667-8.533333 13.397333-8.533333z m0-72.021334a86.357333 86.357333 0 0 0-78.506667 49.92l-91.605333 194.986667-204.672 31.317333A86.357333 86.357333 0 0 0 68.010667 398.506667a86.357333 86.357333 0 0 0 20.181333 88.106666l150.698667 154.453334-35.584 218.026666a86.826667 86.826667 0 0 0 127.701333 89.898667L512 848.981333l180.992 100.138667a86.826667 86.826667 0 0 0 127.701333-89.898667l-35.584-218.026666 150.698667-154.496a86.570667 86.570667 0 0 0 20.181333-88.106667 86.357333 86.357333 0 0 0-69.205333-58.197333l-204.672-31.402667-91.605333-194.986667A86.272 86.272 0 0 0 512 64.085333z" fill="#000000" opacity=".65" p-id="9676"></path></svg>
            </IconButton>
        }
    }, [isLike,track])
    return <div onClick={goDetail} className='article'>
        <h4>{title}
            {star}
        </h4>
        <p>作者：{author}   时间：{moment(create_time).format('YYYY-MM-DD HH:mm')}</p>
        <p>
            {content}
        </p>
    </div>
}

export default Article;